<template>
	<view class="pages">
		<u-navbar title="房源详情" rightText="" :safeAreaInsetTop="true" @leftClick="leftClick" @rightClick="rightClick">
			<view class="u-nav-slot" slot="right">
				<u-icon name="edit-pen" label="编辑" labelColor="#68a5e8" color="#68a5e8" size="20"></u-icon>
			</view>
		</u-navbar>
		<view class="swiper_box">
			<swiper v-if="showMideair == 'img'" class="swiper" circular :indicator-dots="indicatorDots"
				:interval="interval" :duration="duration" :current="currentIndex" @change="handleChange">
				<swiper-item v-for="(item, index) of imgList" :key="item.url" class="swiper_item">
					<image :src="item.url" mode="" @tap="_previewImage(item.url,index)"></image>
				</swiper-item>
			</swiper>
			<swiper v-if="showMideair == 'video'" class="swiper" circular :indicator-dots="indicatorDots"
				:interval="interval" :duration="duration">

				<swiper-item v-for="(item, index) of videoList" :key="item.url" class="swiper_item">
					<!-- <video :src="item.url" mode=""></video> -->
					<view v-html="item.url"> </view>
				</swiper-item>
			</swiper>
			<view class="meadia_option">
				<view class="slot_floor">
					<view :class="['item', showMideair == 'img' ? 'active_floor' :'']" @click="showMideair = 'img'">
						图片
					</view>
					<view :class="['item', showMideair == 'video' ? 'active_floor' :'']" @click="showMideair = 'video'">
						视频
					</view>
				</view>
			</view>
		</view>
		<view class="data">
			<view class="title">
				房源状态
			</view>
			<u-cell-group :border="false">
				<u-cell title="出租状态" :border="false" value="未租" v-if="houseInfo.rentState == 0"
					titleStyle="color:#a09f9f"></u-cell>
				<u-cell title="出租状态" :border="false" value="已租" v-if="houseInfo.rentState == 1"
					titleStyle="color:#a09f9f"></u-cell>
				<u-cell title="出租状态" :border="false" value="转租中" v-if="houseInfo.rentState == 2"
					titleStyle="color:#a09f9f"></u-cell>
				<!-- 		<u-cell title="房源状态" :border="false" :value="houseInfo.houseState == 0 ? '下架' : '上架'"
					titleStyle="color:#a09f9f"></u-cell> -->
				<!-- <u-cell title="官网展示" :border="false" value="已通过审核" titleStyle="color:#a09f9f"></u-cell> -->
				<u-cell title="房间名称" :border="false" :value="houseInfo.houseRoomName"
					titleStyle="color:#a09f9f"></u-cell>
				<u-cell title="租金" :border="false" :value="houseInfo.rental + '元'" titleStyle="color:#a09f9f"></u-cell>

				<u-cell title="短租费用" :border="false" value="无报价" titleStyle="color:#a09f9f" v-if="houseInfo.shortRental==null"></u-cell>	
				<u-cell title="短租费用" :border="false" :value="houseInfo.shortRental+ '元'" titleStyle="color:#a09f9f" v-else></u-cell>
				<u-cell title="对外固定费" :border="false" value="" titleStyle="color:#a09f9f">
				</u-cell>
				<u-gap height="10" bgColor="#eff3f5"></u-gap>
				<view class="" v-for="(item, idnex) of houseInfo.livingPaymentList" :key="idnex">
					<u-cell title="缴费项目" :border="false" titleStyle="color:#a09f9f">
						<view class="" slot="value">
							{{ item.paymentItem }}
						</view>
					</u-cell>

					<u-cell title="缴费标准" :border="false" titleStyle="color:#a09f9f">
						<view class="" slot="value">
							{{ item.rates }}
						</view>
					</u-cell>
					<u-gap height="10" bgColor="#eff3f5"></u-gap>
				</view>

				<u-gap height="10" bgColor="#eff3f5"></u-gap>
				<view class="title">
					基本信息
				</view>
				<u-cell title="小区名称" :border="false" :value="houseInfo.communityName"
					titleStyle="color:#a09f9f"></u-cell>
				<u-cell title="小区地址" :border="false" :value="houseInfo.communityAddress"
					titleStyle="color:#a09f9f"></u-cell>
				<u-cell title="幢/栋" :border="false" :value="houseInfo.buildingNumber+ '幢'"
					titleStyle="color:#a09f9f"></u-cell>
				<u-cell title="单元号" :border="false" :value="houseInfo.unitNumber+ '单元'"
					titleStyle="color:#a09f9f"></u-cell>
				<u-cell title="门牌号" :border="false" :value="houseInfo.ventricleNumber"
					titleStyle="color:#a09f9f"></u-cell>
				<u-cell title="整套户型" :border="false" :value="houseInfo.houseType" titleStyle="color:#a09f9f"></u-cell>
				<u-cell title="房间面积" :border="false" :value="houseInfo.area + 'm²'" titleStyle="color:#a09f9f"></u-cell>
				<u-cell title="房间朝向" :border="false" :value="houseInfo.aspect" titleStyle="color:#a09f9f"></u-cell>
				<u-cell title="所属楼层" :border="false" :value="houseInfo.floor" titleStyle="color:#a09f9f"></u-cell>
				<u-gap height="10" bgColor="#eff3f5"></u-gap>
				<u-gap height="10" bgColor="#eff3f5"></u-gap>
				<u-cell title="带看联系人" :border="false" :value="houseInfo.viewingContact"
					titleStyle="color:#a09f9f"></u-cell>
				<u-cell title="联系人号码" :border="false" :value="houseInfo.viewingContactPhone"
					titleStyle="color:#a09f9f"></u-cell>
				<u-gap height="10" bgColor="#eff3f5"></u-gap>
				<u-cell title="钥匙位置" :border="false"
					:value="houseKeyRange[houseInfo.houseKey ? houseInfo.houseKey : 0].text "
					titleStyle="color:#a09f9f"></u-cell>
				<u-cell :title="lableName" :border="false" v-show="keyIsShow" :value="houseInfo.remark"
					titleStyle="color:#a09f9f"></u-cell>
				<u-gap height="10" bgColor="#eff3f5"></u-gap>
				<!-- <u-cell title="房屋设施" :border="false" label="" titleStyle="color:#a09f9f"></u-cell> -->
				<u-gap height="10" bgColor="#eff3f5"></u-gap>
				<u-cell title="房源属性" :border="false" titleStyle="color:#a09f9f">
					<view slot="value" style="width: 80%; height: auto;">
						<view
							style="display: inline-block; margin-top: 3rpx; margin-right: 3rpx; padding: 5rpx 10rpx; background-color: #3c9cff; color: #fff;"
							v-for="(item, index) of houseInfo.houseLabelList" :key="index">
							{{ item.labelName }}
						</view>
					</view>
				</u-cell>
				<!-- 				<u-cell title="租约信息" :border="false" :value="houseInfo.tenantName || '暂无'"
					titleStyle="color:#a09f9f"></u-cell> -->
				<u-cell title="历史租约数量" :border="false" titleStyle="color:#a09f9f">
					<view slot="value" style="color:#a09f9f">
						{{houseInfo.leaseHistory}}
					</view>
				</u-cell>
				<!-- 	<u-cell v-if="!houseInfo.openTask" title="勘察任务" :border="false" titleStyle="color:#a09f9f">
					<u-switch slot='value' v-model="surveyState" :disabled="isDisabled" @change="asyncChange"
						inactiveColor="rgb(230, 230, 230)"></u-switch>
				</u-cell> -->
				<!-- 	<u-cell v-if="houseInfo.openTask" title="勘察任务" :border="false" titleStyle="color:#a09f9f">
					<text v-if="houseInfo.surveyTaskState==3" slot="value" class="u-slot-value"
						@click="confirmSurvey">确认</text>
					<text v-if="houseInfo.surveyTaskState==1||houseInfo.surveyTaskState==2" slot="value"
						class="u-slot-value">勘察中</text>
					<u-switch v-if="houseInfo.surveyTaskState==0" slot='value' v-model="surveyState"
						:disabled="isDisabled" @change="asyncChange" inactiveColor="rgb(230, 230, 230)"></u-switch>
				</u-cell> -->

				<u-cell title="" :border="false" titleStyle="color:#a09f9f">

				</u-cell>

			</u-cell-group>
		</view>
		<view class="button_box" v-show="leaseShow">
			<u-button color="#f05a23" text="查看租约" @click="toLease(houseInfo)"></u-button>
		</view>
		<u-toast ref="uToast"></u-toast>

	</view>
</template>

<script>
	import {
		HouseDetail,
		agreeSurveySucc,
		rejectSurvey,
		getHouseLeaseDetail
	} from "@/api/house/index.js"
	import {
		sublet
	} from "@/api/my/index.js"
	export default {
		data() {
			return {
				currentIndex: 0,
				houseId:0,
				leaseShow:false,
				isDisabled: true,
				surveyState: false,
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				showMideair: "img",
				interval: 2000,
				duration: 500,
				meadiaOption: [{
					name: '图片',
				}, {
					name: '视频',
				}],
				keyIsShow: false,
				lableName: "",
				id: 0,
				houseInfo: {},
				vule: false,
				houseKeyRange: JSON.parse(uni.getStorageSync('houseInfo')).houseKeyRange,
				imgList: [{
					url: "../../static/default/no_img.png"
				}],
				videoList: ['../../static/default/default.png'],
				FixedFeeList: [{
						paymentItem: '水费',
						rates: ''
					},
					{
						paymentItem: '电费',
						rates: ''
					},
					{
						paymentItem: '煤气费',
						rates: ''
					},
					{
						paymentItem: '宽带费',
						rates: ''
					},
				],
			}
		},
		onLoad(option) {
			this.id = JSON.parse(option.item).id
			this.houseId = JSON.parse(option.item).houseId
			this.getHouseDetail(this.id);
			this.leaseDetail()
		},
		onShow() {

			/* if(this.houseInfo.mediaVoList.length != 0) {
				this.isDisabled = true
			} */

		},
		methods: {
			handleChange(e) {
				console.log(e.target.current, 1111);
				this.currentIndex = e.target.current;
			},
			_previewImage(image, index) {
				var imgArr = [];
				this.imgList.map((item, Iindex) => {
					imgArr.push(item.url)
				})
				//预览图片
				uni.previewImage({
					urls: imgArr,
					current: index,
					count: image
				});
			},

			leftClick() {
				uni.navigateBack(-1)
			},
			rightClick() {
				uni.navigateTo({
					url: './availabilityEdit?info=' + JSON.stringify(this.houseInfo),
					animationType: this.animation.type,
					animationDuration: this.animation.time
				})
			},
			fliterImgList() {


				if (this.houseInfo.mediaVoList.length != 0) {

					this.imgList = [];
					this.videoList = [];
					this.houseInfo.mediaVoList.map((item, index) => {
						if (item.mediaType == '1') {
							var obj = {
								// url: item.mediaUrl,
								url: '<video  src="' + item.mediaUrl +
									'" style="width:100%; height:200px;" controls="controls"></video>',
								type: 'video'
							}
							this.videoList.push(obj);
						} else {
							var obj = {
								url: item.mediaUrl,
								type: 'image'
							}
							this.imgList.push(obj);
						}
					})
				}

			},

			changeKeyName(key) {
				let value = ""
				this.houseKeyRange.map((item, index) => {
					if (item.value = key) {
						value = item.text
					}
				})
				return value
			},
			async getHouseDetail(id) {
				const res = await sublet(id);
				if (res.data.code != 200) {
					this.$refs.uToast.show({
						message: res.data.msg,
						type: 'error'
					})
					setTimeout(() => {
						uni.navigateBack(-1)
					}, 1000)

				} else {
					this.houseInfo = res.data.data;
					if (this.houseInfo.houseKey == 0) {
						this.lableName = '密码'
						this.keyIsShow = true
					}
					if (this.houseInfo.houseKey == 7) {
						this.lableName = '其他'
						this.keyIsShow = true
					}
					if (this.houseInfo.livingPaymentList.length == 0) {
						this.houseInfo.livingPaymentList = this.FixedFeeList
					}


					if (!this.houseInfo.openSurvey) {
						this.isDisabled = false

						if (this.houseInfo.surveyTaskState == 0) {

							this.surveyState = true
						}
					}

					this.fliterImgList()
				}
			},
			async leaseDetail() {
				const res = await getHouseLeaseDetail(this.houseId)
				console.log(res,'leaseDetail');
				if(res.data.code ==200){
					this.leaseShow = true
				}else{
					this.leaseShow = false
				}
			
			},
			toLease(houseInfo) {
					uni.navigateTo({
						url: '/pages/my/lease/leaseDetail?id=' + houseInfo.leaseId,
						animationType: this.animation.type,
						animationDuration: this.animation.time
					})
			},
			confirmSurvey() {
				const _this = this;
				uni.showModal({
					title: '是否同意勘察结果',
					//content: '是否同意勘察结果',
					cancelText: "驳回",
					success: async (res) => {
						if (res.confirm) {
							// 用户点击了确定按钮，将计算经纪人的业绩
							//this.getLocation();
							console.log('用户同意');
							const res = await agreeSurveySucc(_this.id)
							_this.$refs.uToast.show({
								message: res.data.msg,
								type: 'success'
							})
						} else if (res.cancel) {
							// 用户点击了取消按钮
							console.log('用户取消了授权');
							const res = await rejectSurvey(_this.id)
							_this.$refs.uToast.show({
								message: res.data.msg,
								type: 'success'
							})
						}
					}
				});
			}

		}
	}
</script>

<style lang="scss" scoped>
	@import "@/styles/global.scss";
	@import "@/styles/index.scss";

	.swiper_box {
		position: relative;
		width: 100%;
		height: 400rpx;
		margin-top: 50rpx;
		overflow: hidden;
		background-color: #fff;


		.swiper {
			width: 100%;
			height: 100%;

			.swiper_item {
				width: 100%;
				height: 100%;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.meadia_option {
			position: absolute;
			z-index: 7;
			bottom: 10rpx;
			left: 50%;
			transform: translateX(-50%);
			// height: 80rpx;
			// width: 200rpx;
			// background-color: #fff;
			// border-radius: 30rpx;
		}
	}

	.pages {
		font-size: 32rpx;
		box-sizing: border-box;
		padding-top: 88rpx;

		.data {
			padding-bottom: 80rpx;
		}

		.u-nav-slot {
			color: #00aaff;
			font-weight: bold;
		}

		.u-slot-value {
			color: #00aaff;
			font-weight: bold;
		}

		.title {
			font-weight: bold;
			line-height: 3;
			padding: 0 30rpx;
		}

		.button_box {
			margin-top: 5%;
			width: 100%;
			background-color: #fff;
			padding: 30rpx;
			position: fixed;
			box-sizing: border-box;
			bottom: 0;
		}

	}

	::v-deep .u-tabs__wrapper__nav__item {
		/* padding: 0 11px; */
		padding: 0 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		// width: 60rpx;
		background-color: aqua;
		width: 50%;
		height: 100%;
		border-radius: 50%;
		overflow: hidden;
	}

	// ::v-deep .u-tabs__wrapper__nav__item-0 {
	// 	background-color: brown;
	// 	width: 50%;
	// }
	.item {
		// float: right;
		display: inline-block;
		padding: 6rpx 12rpx;
		border: 1rpx solid #cfcfcf;
		margin-left: 10rpx;
		border-radius: 10rpx;
		background-color: #fff;
		// margin-top: 10rpx;
	}

	.active_floor {
		background-color: $theme;
		border: 1rpx solid $theme !important;
		color: #fff;
	}
</style>